<template>
  <div class="user-wrapper user-change-phone">
    <div class="user-title">
      <van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'bind-phone' }" />
      {{ $t('User.mobile_binding') }}
    </div>
    <div class="change-phone-form">
      <p class="form-label">{{ $t('User.phone_number') }}</p>
      <van-field
        v-model="phoneNumber"
        :name="$t('User.phone_number')"
        :placeholder="$t('User.input_phone_msg')"
        :rules="[{ required: true, message: $t('User.input_phone_msg') }]"
        clearable
      />
      <p class="form-label">{{ $t('User.validate_code') }}</p>
      <van-field
        v-model="validateCode"
        type="text"
        :name="$t('User.validate_code')"
        :placeholder="$t('User.validate_code_msg')"
        :rules="[{ required: true, message: $t('User.validate_code_msg') }]"
        clearable
      >
        <van-button
            slot="button"
            size="small"
            type="primary"
            :disabled="state === 1"
            @click="getCode">{{ (state === -1 || state === 0) ? $t('User.send_validate_code') : (state === 1 ? $t('User.send_validate_count', [count]) : $t('User.send_validate_retry')) }}</van-button>
        </van-field>
        <van-button
          class="block-btn"
          @click="onSubmit"
          block>
          {{ $t('User.submit') }}
        </van-button>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      phoneNumber: '',
      validateCode: '',
      timer: null,
      count: 60,
      state: -1,
    };
  },
  methods: {
    // 绑定手机
    onSubmit() {
      if (this.phoneNumber === '') {
        return this.$toast(this.$t('User.input_phone_msg'));
      } else if (this.validateCode === '') {
        return this.$toast(this.$t('User.validate_code_msg'));
      }

      this.$jsBridge.JsGoBindPhone({
        phoneNumber: this.phoneNumber,
        validateCode: this.validateCode,
      }, res => {
        if (res.code === 0) {
          // 绑定成功, 返回个人中心
          this.$router.replace({
            name: 'user',
          });
        }
      });
    },
    async getCode() {
      if (this.state === -1) return;
      // 第1次文案不应该变化
      if (this.state === 0) this.state = -1;

      const { code, data } = await this.$API.user.sendsms({
        userInfoParam: {

        },
      });

      if (code === 0) {
        this.validateCode = data.code;
        this.timeCount();
      }
    },
    // 短信倒计时
    timeCount() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.count) {
          this.count--;
          this.state = 1;
        } else {
          clearInterval(this.timer);
          this.count = 60;
          this.state = 2;
        }
      }, 1000);
    },
  }
};
</script>

<style lang="less">
  .user-change-phone{
    background: #fff;
  }
  .change-phone-form{
    padding: 40px;
  }
  .form-label{
    margin: 30px 0 16px;
  }
  .van-field{
    background: #f6f6f6;
  }
  .block-btn{
    margin: 50px auto;
  }
</style>
